<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_personal.messageEdit }}</view>
				<view>
					<x-common-btn width="110" height="76" borderRadius="22" @click="saveAction">
						<view>{{ lang_common.complete }}</view>
					</x-common-btn>
				</view>
			</view>

			<!-- 分割线 -->
			<u-gap height="0.5" bg-color="#f9f9f9"></u-gap>
		</view>

		<view class="u-m-t-20 u-f-34 u-lh-48">
			<view v-for="(item, index) in datalist" :key="index" class="flex-center-between"
				style="padding: 0 30rpx; height: 80rpx;">
				<view class="nowrap font-medio">{{ lang_personal[item.key] }}</view>

				<view class="flex-center" style="color: #9d9d9d;">
					<view class="u-m-r-20">
						<view v-if="item.key === 'avatar'" class="u-avatar-62 clear-flex">
							<x-avatar selWidth="612upx" selHeight="612upx"
								:avatar-src="showImage(form.avatar)"
								avatarStyle="width: 62upx; height: 62upx; border-radius: 62upx;" inner="true"
								@upload="myUpload"
								@fail="settingValue = 'camera'">
							</x-avatar>
						</view>

						<view v-else-if="item.key === 'nick'">
							<input v-model="form.nick" maxlength="10" class="u-f-36 u-text-right" style="width: 100%;"
								:placeholder="lang_first.first_error" />
						</view>

						<view v-else-if="item.key === 'birthday'" @click="visible = true">
							{{ form.birthday }}
						</view>

						<view v-else-if="item.key === 'desc'">
							<input v-model="form.desc" maxlength="20" class="u-f-36 u-text-right"
								:placeholder="lang_personal.descritionTips" />
						</view>

						<view v-else-if="item.key === 'sex'" @click="sexVisible = true">
							{{ lang_common[sexKey(form.sex)] }}
						</view>

						<view v-else-if="item.key === 'city'" @click="getArea">
							{{ areaFormat || lang_personal.cityTips }}</view>
					</view>
					<u-icon name="right" custom-prefix="u" color="#ACACAC" size="24"></u-icon>
				</view>
			</view>
		</view>

		<!-- 时间选择器 -->
		<u-picker v-model="visible" mode="time" z-index="10203" :params="params" :showTimeTag="false" @confirm="changeDate"></u-picker>

		<!-- 性别弹窗 -->
		<x-popup v-model="sexVisible" mode="bottom" z-index="10203">
			<view class="bg-white">
				<view v-for="(item, index) in sexs" :key="index">
					<u-gap v-if="index" height="0.5" bg-color="rgba(151,151,151,.2)"></u-gap>
					<view class="u-f-30 u-lh-42 u-text-center" style="padding: 36rpx 0;width: 100%;"
						@click="changeSexAction(item)">{{ lang_common[item.key] }}
					</view>
				</view>
				<!-- 分割线 -->
				<u-gap height="8" bg-color="#F5F5F5"></u-gap>
				<view class="u-f-36 u-lh-50 flex-center-center" style="padding: 32rpx 0;" @click="sexVisible = false">
					{{ lang_common.cancel }}
				</view>
			</view>
		</x-popup>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import upload from '@/utils/upload.js'
	import {
		userUpdateInfo
	} from '@/api/personal.js'
	import dayjs from 'dayjs'

	const sexs = [{
			key: 'male',
			value: 1
		},
		{
			key: 'famale',
			value: 2
		}
	]
	export default {
		data() {
			let datalist = [{
					key: 'avatar',
					label: '头像'
				},
				{
					key: 'sex',
					label: '性别'
				},
				{
					key: 'nick',
					label: '昵称'
				},
				{
					key: 'birthday',
					label: '生日'
				},
				{
					key: 'city',
					label: '所在城市'
				},
				{
					key: 'desc',
					label: '个性签名'
				},
			]
			return {
				datalist,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				visible: false,
				sexVisible: false,
				// 性别列表
				sexs,
				form: {},
				area: {},
				
				settingValue: ''
			}
		},
		computed: {
			areaFormat() {
				let str = '',
					area = this.area
				for (let key in area) {
					let item = area[key]
					item && item.title && (str = str + item.title + ',')
				}
				str && (str = str.slice(0, -1))
				return str
			}
		},
		onLoad() {
			let keys = ['avatar', 'sex', 'nick', 'birthday', 'city', 'desc']
			keys.map(item => {
				this.form[item] = this.userInfo[item] || ''
			})
			let areaKeys = ['country', 'province', 'city', 'area']
			let areaObj = {}
			areaKeys.map(item => {
				if (this.userInfo[item]) {
					areaObj[item] = {
						title: this.userInfo[item],
						[item + 'Id']: this.userInfo[item + 'Id']
					}
				}
			})
			this.area = {
				...areaObj
			}
		},
		methods: {
			async failAction(e) {
				let result = await this.authCamera()
				console.log(result)
				if (!result) {
					this.cameraUnSetVisible = true
				}
			},
			// 上传图片回调
			myUpload(res) {
				upload(({
					filePath: res.path
				}), result => {
					if (result.status === 'complete') {
						this.form.avatar = result.msg.path
					}
				})
			},
			// 日期改变后触发
			changeDate({
				year,
				month,
				day
			}) {
				this.form.birthday = dayjs(`${ year }-${ month }-${ day }`).format('YYYY-MM-DD')
				this.visible = false
			},
			// 性别翻译
			sexKey(val = 0) {
				return val ? sexs[val - 1].key : 'unKnow'
			},
			// 改变性别
			changeSexAction(item = {}) {
				this.$set(this.form, 'sex', item.value)
				this.sexVisible = false
			},
			// 改变所在城市
			getArea() {
				uni.navigateTo({
					url: '/pages/other/city/city',
					events: {
						change: res => {
							this.area = res
						}
					},
					success: res => {
						res.eventChannel.emit('city-page', this.area)
					}
				})
			},
			saveAction() {
				let {
					avatar,
					sex,
					nick,
					birthday,
					desc
				} = this.form
				let {
					country,
					province,
					city,
					area
				} = this.area
				let queryObj = {}
				for (let key in this.form) {
					if (key !== 'city') {
						queryObj[key] = this.form[key]
					}
				}
				for (let key in this.area) {
					queryObj[key] = this.area[key].title
					queryObj[key + 'Id'] = this.area[key][key + 'Id']
				}
				if (this.isClick) return;
				this.isClick = true
				userUpdateInfo(queryObj).then(() => {
					this.$store.dispatch('updateUserInfo')
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => { this.isClick = true })
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
